<template>
  <div class="chartsdiv">
    <!-- <MyCharts
      :dataSource="data.dataSource"
      canvasWidth="100%"
      canvasHeight="100%"
    ></MyCharts> -->
    <div class="unit">(m)</div>
    <el-slider
      class="self_slider self_slider2"
      :disabled="true"
      v-model="watershuiwei"
      :min="60"
      :max="100"
      :marks="guideMarks"
      :show-tooltip="true"
      @change="changeSliderue"
      vertical
    />
    <div class="position1">
      <span class="henxian">———</span>
      <span class="levelsize">&nbsp;校核</span>
    </div>
    <div class="position2">
      <span class="henxian">———</span>
      <span class="levelsize">&nbsp;设计</span>
    </div>
    <div class="position3">
      <span class="henxian">———</span>
      <span class="levelsize">&nbsp;讯限</span>
    </div>
    <div class="position4">
      <span class="henxian">———</span>
      <span class="levelsize">&nbsp;死水</span>
    </div>
    <div class="tezheng">特征水位</div>
  </div>
</template>

<script setup>
import MyCharts from "@/components/echarts/index.vue";
import {
  ref,
  reactive,
  onMounted,
  computed,
  h,
  defineProps,
  nextTick,
} from "vue";
const props = defineProps({
  levelwater: String,
});
// let shuiwei = ref(20);
let watershuiwei = ref(60);
let interval = ref(null);
const data = reactive({
  dataSource: {
    title: {
      text: "",
      textStyle: {
        color: "#ffffff",
        align: "center",
        fontSize: 12,
        weight: 100,
      },
      left: "20%",
      bottom: "0%",
    },
    grid: {
      // 控制图的大小，调整下面这些值就可以，
      x: 1,
      y: 4,
      x2: 60,
      y2: 1, // y2可以控制 X轴跟Zoom控件之间的间隔，避免以为倾斜后造成 label重叠到zoom上
      // backgroundColor: '#cdcdcd',
      show: true,
      left: "50%",
      right: "60%",
      top: "8%",
      bottom: "28%",
      borderWidth: 2, // 图标外边框大小
      borderColor: "#011737", // 图标边框颜色
    },
    tooltip: {
      trigger: "item",
    },
    xAxis: [
      {
        type: "category",
        axisLabel: {
          show: false,
        },
        boundaryGap: false,
        data: ["水位", "水位"],
      },
    ],
    yAxis: [
      {
        name: "(m)",
        type: "value",
        // axisLabel: { show: false },
        min: 0,
        max: 100,
        splitNumber: 10,
        show: true,
        splitLine: {
          // 坐标轴内分割线
          show: true,
          lineStyle: {
            color: "#031738",
          },
        }, // 坐标轴内背景
        splitArea: {
          show: false,
          areaStyle: {
            color: ["rgba(255,144,0,0.3)", "rgba(255,144,0,0.3)"], // 分隔背景用两种颜色显示
          },
        },
      },
    ],
    series: [
      {
        type: "line",
        // 显示标签数据
        show: false,
        itemStyle: {
          normal: {
            areaStyle: {
              show: false,
              color: "#21fbff",
            },
            left: 0,
          },
        },

        data: [
          {
            value: 86,
          },
          {
            value: 86,
            label: {
              show: true,
              position: [20, 0],
              width: 20,
              height: 100,
              // formatter: '{back|{c} }'+ params.senUnitName ,
              formatter: "{back|{c}CM}",
              // formatter: `{back|{c}}{unit| ${props.value.value.replace('CM', '')}CM}`,
              rich: {
                back: {
                  align: "center",
                  lineHeight: 50,
                  fontSize: 12,
                  fontFamily: "digifacewide",
                  color: "#21fbff",
                },
                unit: {
                  fontFamily: "微软雅黑",
                  fontSize: 12,
                  lineHeight: 50,
                  color: "#21fbff",
                },
              },
            },
          },
        ],
        symbolSize: 1,
      },
    ],
  },
});

onMounted(() => {
  // getyushuiqing();
  animateSlider();
});
let guideMarks = computed(() => {
  let marks = {};
  for (let i = 0; i <= 160; i++) {
    if (i % 10 == 0) {
      marks[i] = i + "";
    } else if (i % 2 == 0) {
      marks[i] = {
        style: {
          color: "#ccc",
        },
        label: h("span", "|"),
      };
    }
    // else if(i % 4 == 0){
    // }
  }
  return marks;
});
function animateSlider() {
  // 使用JavaScript动态设置滑块的值并触发动画
  // 假设你想要动画效果，可以使用setTimeout或者CSS过渡效果
  // 例如使用CSS过渡效果，可以在数据变化时添加一个临时的class来触发动画
  interval.value = setInterval(() => {
    watershuiwei.value += 0.1;
    if (watershuiwei.value >= props.levelwater) {
      watershuiwei.value = props.levelwater;
      clearInterval(interval.value);
    }
  }, 0.0001);
}
</script>

<style lang="scss" scoped>
.chartsdiv {
  width: 150px;
  height: 250px;
  position: absolute;
  left: 500px;
  top: 46px;
  background: rgba(33, 87, 109, 0.47);
  //   display: flex;
  // //   flex-direction: column;
  // //   justify-content: center;
  .unit {
    //width: 30px;
    position: absolute;
    top: 0px;
    left: 50%;
    color: #ffffff;
    transform: translateX(-50%);
    font-size: 18px;
  }
  .tezheng {
    position: absolute;
    bottom: 0px;
    color: #ffffff;
    left: 50%;
    transform: translateX(-50%);
    font-size: 18px;
  }
  .henxian {
    font-size: 13px;
    font-weight: 550;
    color: red;
  }
  .position1 {
    position: absolute;
    top: 33px;
    left: 62.4px;
  }
  .position2 {
    position: absolute;
    top: 46px;
    left: 62.4px;
  }
  .position3 {
    position: absolute;
    top: 60px;
    left: 62.4px;
  }
  .position4 {
    position: absolute;
    top: 110px;
    left: 62.4px;
  }
  .levelsize {
    color: #ffffff;
    font-size: 14px;
  }
}

// .self_slider {
//   width: 80px;
// }
::v-deep {
  .self_slider {
    position: absolute;
    top: 12%;
    left: 25%;
    width: 60px !important;
    height: 75% !important;
    // transform: translate(-50% -50%) !important;
    // margin: 0 auto !important;
  }
  .self_slider .el-slider__bar {
    background: transparent !important;
  }
  .self_slider .el-slider__button {
    background-color: #ffffff !important;
    border: 0px !important;
    width: 8px !important;
    height: 8px !important;
  }
  .self_slider .el-slider__marks-text {
    // margin-left: -20px;
    color: #ffffff;
    // transform: translateY(80px);
    &:nth-child(5n + 1) {
      margin-left: -45px !important;
      //   margin-top: 90px !important;
      transform: translateY(8px) !important;
      color: #ffffff;
    }
  }
  .self_slider .el-slider__marks-text span {
    display: inline-block !important;
    height: 17px !important;
    width: 4px !important;
    font-size: 17px !important;
    font-weight: 550 !important;
    // transform-origin: center;
    overflow: hidden !important;
    transform: translate(-5px, 46px) rotate(90deg) !important;
    color: #69c7d9 !important;
    // z-index: 99999 !important;
  }
  // .el-slider__runway {
  //   height: 30px;
  // }
  .self_slider .el-slider__runway .el-slider__bar {
    // height: 30px;
    width: 17px;
    // background: #46a5d9;
    // background: #e9911d !important;
    // background-image: linear-gradient(
    //   to top,
    //   #ff33cc,
    //   #ffcc33
    // ) !important; /* 从左到右的渐变色 */
    background: linear-gradient(
      180deg,
      #ff9000 0%,
      rgba(39, 96, 128, 0) 100%
    ) !important;
    border-radius: 8px !important;
    // border: 1px solid #4dc0ff;
  }
  // .el-slider__runway .el-slider__button-wrapper {
  //   top: -2px;
  // }
  .self_slider .el-slider__stop {
    display: none;
  }
  .self_slider .el-slider__button {
    // display: none;
    visibility: hidden;
  }
  .self_slider .el-slider__marks {
    width: 17px !important;
  }
  .self_slider {
    --el-slider-width: 40px !important;
    --el-slider-border-radius: 4px 4px 4px 4px;
  }
}
/* CSS过渡动画样式 */
.el-slider__bar.animate {
  transition: left 5s, width 5s;
}
</style>
